<style lang="less">
  @import "train-form";
</style>

<template>
  <div class="train">
    <p>当前正在进行第 {{ current + 1 }} 步</p>
    <Steps :current="current">
      <Step title="步骤1"></Step>
      <Step title="步骤2"></Step>
      <Step title="步骤3"></Step>
      <Step title="步骤4"></Step>
    </Steps>
    <div class="train-form">
      <Form :model="train":rules="rules" @keydown.enter.native="submit" align="left">
        <FormItem prop="trainDataSet" v-if="current==0">
          <Input v-model="train.trainDataSet" disabled type="text" placeholder="请点击右侧按钮选择数据集">
          <Button slot="append" icon="ios-search" @click="value3=true"></Button>
          </Input>
          <Drawer title="选择数据集" v-model="value3" width="500" :mask-closable="false" :styles="styles">
            <Form >
              <FormItem prop="dataSetName">
                <Input v-model="fuzzyKey" icon="ios-images" type="text" style="width: 200px" placeholder="请输入数据集名或描述"/>
                <Select v-model="creator" filterable remote :remote-method="remoteMethod" :loading="loading1" placeholder="数据集所有者信息" style="width: 200px">
                  <Option v-for="(option, index) in options" :value="option.value" :key="index">{{option.label}}</Option>
                </Select>
                <Button type="primary" @click="searchDataSet">查询</Button>
              </FormItem>
            </Form>
            <Table border ref="selection" :columns="columns" :data="data"></Table>
          </Drawer>
        </FormItem>
        <FormItem v-if="current==0">
          <Button type="primary" long @click="openModal">数据集分析</Button>
          <Modal v-model="modal" title="数据集分析" footer-hide fullscreen>
            <div class="train-form-dataAnalyse">
              <Card :bordered="false">
                <p slot="title">数据分析结果</p>
                <p>选择需要的类</p>
                <p>选择需要的类</p>
                <p>选择需要的类</p>
                <p>
                  <Button>取消</Button>
                  <Button type="primary">保存</Button>
                </p>
              </Card>
            </div>
            <div class="train-form-dataSetDivide">
              <Card style="height: 300px">
                <p slot="title">数据集划分</p>
                <Row>
                  <Col span="6">
                    训练集比例：<InputNumber :min=0 :max=10 v-model="train.trainSet"/>
                  </Col>
                  <Col span="6">
                    测试集比例：<InputNumber :min=0 :max=10 v-model="train.testSet"/>
                  </Col>
                  <Col span="6">
                    验证集比例：<InputNumber :min=0 :max=10 v-model="train.verifySet"/>
                  </Col>
                  <Col span="1" offset="2">
                    <Button type="primary">确认</Button>
                  </Col>
                  <Col span="2" offset="1">
                    <Button @click="resetData">重新划分</Button>
                  </Col>
                </Row>
                <Row>
                  <Col span="6">
                    {{randPrompt}}
                    <RadioGroup v-model="train.randSeed">
                      <Radio label="是"></Radio>
                      <Radio label="否"></Radio>
                    </RadioGroup>
                  </Col>
                  <Col span="4">
                    <Input type="text" placeholder="请输入UUID" v-model="UUID" style="width: 300px"/>
                  </Col>
                  <Col span="1" offset="10">
                    <Button type="primary" @click="createUUID">生成</Button>
                  </Col>
                  <Col span="1" offset="1">
                    <Button>取消</Button>
                  </Col>
                </Row>
              </Card>
            </div>
            <Divider/>
            <div class="train-form-footer">
              <Button @click="closeModal">取消</Button>
              <Button type="primary" @click="saveData">保存</Button>
            </div>
          </Modal>
        </FormItem>
        <FormItem prop="ttainSet" v-if="current==0">
          <Row type="flex">
            <Col span="8">
              训练集<InputNumber :min=0 :max=10 style="width: 45px" disabled v-model="train.trainSet"/>
            </Col>
            <Col span="8">
              测试集<InputNumber :min=0 :max=10 style="width: 45px" disabled v-model="train.testSet"/>
            </Col>
            <Col span="8">
              验证集<InputNumber :min=0 :max=10 style="width: 45px" disabled v-model="train.verifySet"/>
            </Col>
          </Row>
          <p align="left">随机码：
            <RadioGroup v-model="train.randSeed">
              <Radio label="是" disabled></Radio>
              <Radio label="否" disabled></Radio>
            </RadioGroup>
          </p>
          <p><Input v-model="uuid" disabled/></p>
        </FormItem>
        <FormItem prop="chooseModel" v-if="current==1">
          <Input v-model="train.chooseModel" disabled type="text" placeholder="请点击右侧按钮选择模型">
          <Button slot="append" icon="ios-search" @click="value4=true"></Button>
          </Input>
          <Drawer title="选择模型" v-model="value4" width="500" :mask-closable="false" :styles="styles">
            <Form >
              <FormItem prop="modelName">
                <Input v-model="modelNameSearch" icon="ios-images" type="text" style="width: 200px" placeholder="请输入模型名"/>
                <Input v-model="modelOwner" icon="md-contact" type="text" style="width: 200px" placeholder="请输入模型所有者"/>
                <Button type="primary" @click="searchModel">查询</Button>
              </FormItem>
            </Form>
            <Table border ref="selection" :columns="columns1" :data="data3"></Table>
          </Drawer>
        </FormItem>
        <FormItem prop="algorithm" v-if="current==1">
          <Input v-model="train.algorithm" type="text" disabled placeholder="请点击右侧选择算法">
          <Button slot="append" icon="ios-search" @click="value5=true"></Button>
          </Input>
          <Drawer title="选择算法" v-model="value5" width="500" :mask-closable="false" :styles="styles">
            <Form >
              <FormItem prop="algorithmName">
                <Input v-model="algorithmName" icon="ios-images" type="text" style="width: 200px" placeholder="请输入算法"/>
                <Input v-model="algorithmOwner" icon="ios-images" type="text" style="width: 200px" placeholder="请输入算法所有者"/>
                <Button type="primary" @click="searchAlgorithm">查询</Button>
              </FormItem>
            </Form>
            <Table border ref="selection" :columns="columns2" :data="data4"></Table>
          </Drawer>
        </FormItem>
        <FormItem prop="parameter" v-if="current==1">
          <Upload action="//jsonplaceholder.typicode.com/posts/">
            <Button icon="ios-cloud-upload-outline" style="width:200px">上传超参配置文件</Button>
          </Upload>
        </FormItem>
        <FormItem prop="augmentation" v-if="current==2">
          <Select v-model="train.augmentation" style="width:200px" align="left" placeholder="请选择数据增广方法">
            <OptionGroup label="几何变换">
              <Option v-for="item in data1" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </OptionGroup>
            <OptionGroup label="像素变换">
              <Option v-for="item in data2" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </OptionGroup>
          </Select>
        </FormItem>
        <FormItem prop="trainName" v-if="current==2">
          <Input v-model="train.trainName" type="text" placeholder="请输入训练名">
          <span slot="prepend">
            <Icon type="ios-clipboard-outline"/>
          </span>
          </Input>
        </FormItem>
        <FormItem prop="trainDes" v-if="current==2">
          <Input v-model="train.trainDes" type="textarea":rows="4" placeholder="请输入训练描述"/>
        </FormItem>
        <FormItem v-if="current==3">
          <Button type="primary" style="width: 200px" @click="startTrain">开始训练</Button>
        </FormItem>
      </Form>
    </div>
    <div class="train-foot">
      <ButtonGroup shape="circle">
        <Button type="primary" @click="back">
          <Icon type="ios-arrow-back"></Icon>
          上一步
        </Button>
        <Button type="primary" @click="next">
          下一步
          <Icon type="ios-arrow-forward"></Icon>
        </Button>
      </ButtonGroup>
    </div>
  </div>
</template>

<script>
  import RecommendedColors from "iview/src/components/color-picker/recommend-colors";
  import {url} from '../../../config/url'
  export default {
    name: "create-train",
    components: {RecommendedColors},
    props:{
      trainNameRules: {
        type: Array,
        default: () => {
          return [
            { required: true, message: '训练名不能为空', trigger: 'blur' }
          ]
        }
      },
      trainDesRules: {
        type: Array,
        default: () => {
          return [
            { required: true, message: '训练描述不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    computed:{
      rules(){
        return{
          trainName:this.trainNameRules,
          trainDes:this.trainDesRules,
        }
      }
    },
    data(){
      return{
        current: 0,
        randPrompt:'输入随机码：',
        uuid:'',
        value3: false,
        value4:false,
        value5:false,
        modal:false,
        fuzzyKey:'',
        UUID:'',
        creator:'',
        dataSetDes:'',
        dataSetId:0,
        dataSetOwner:'',
        modelNameSearch:'',
        modelOwner:'',
        algorithmName:'',
        algorithmOwner:'',
        loading1: false,
        options: [],
        data1:[{
          value:'1',
          label:'翻转',
        },{
          value:'2',
          label:'平移',
        },{
          value:'3',
          label:'部分置黑',
        }],
        data2:[{
          value:'7',
          label:'增加噪声和滤波'
        },{
          value:'8',
          label:'变换通道'
        }
        ],
        styles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        train:{
          trainName:'',
          trainDes:'',
          trainDataSet:'',
          augmentation:'否',
          chooseModel:'',
          trainSet:0,
          testSet:0,
          verifySet:0,
          randSeed:'否'
        },
        columns: [
          {
            title: '数据集名',
            key: 'dataSetName',
            width:160
          },
          {
            title: '描述',
            key: 'dataSetDes'
          },
          {
            title: '操作',
            key: 'handle',
            width:80,
            //通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。
            //render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。
            render: (h, params) => {
              return h('div', [
                //选择数据集
                h('Button', {
                  props: {
                    type:'primary'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.chooseDataSet(params.index)
                    }
                  }
                },'确定')
              ]);
            }
          }
        ],
        data: [
        ],
        columns1: [
          {
            title: '模型名',
            key: 'modelName',
            width:160
          },
          {
            title: '模型描述',
            key: 'modelDes'
          },
          {
            title: '操作',
            key: 'handle',
            width:80,
            //通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。
            //render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。
            render: (h, params) => {
              return h('div', [
                //选择模型
                h('Button', {
                  props: {
                    type:'primary'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.chooseModel(params.index)
                    }
                  }
                },'确定')
              ]);
            }
          }
        ],
        data3: [
          {
            modelName:'啤酒训练模型一',
            modelDes:'XXXXXX'
          }
        ],
        columns2: [
          {
            title: '算法集名',
            key: 'algorithmName',
            width:160
          },
          {
            title: '算法描述',
            key: 'algorithmDes'
          },
          {
            title: '操作',
            key: 'handle',
            width:80,
            //通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。
            //render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。
            render: (h, params) => {
              return h('div', [
                //选择算法
                h('Button', {
                  props: {
                    type:'primary'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.chooseAlgorithm(params.index)
                    }
                  }
                },'确定')
              ]);
            }
          }
        ],
        data4: [
          {
            algorithmName:'算法一',
            algorithmDes:'XXXXXX'
          }
        ],
      }
    },
    methods:{
      submit(){

      },
      next () {
        let flag=0;
        if (this.current == 3) {
          alert("已到第四步，请点击开始训练按钮")
        }
        else{
          this.current += 1;
        }
      },
      back(){
        if(this.current==0){
          alert("已到第一步");
          this.current=0
        }
        else{
          this.current-=1;
        }
      },
      //查询符合条件的数据集
      searchDataSet(){
        let query=JSON.stringify({
          'name':this.fuzzyKey,
          'description':this.fuzzyKey,
          'creator_id':this.creator,
          'fuzzy_key':['name','description'],
          'or_key':['name','description']
        });
        this.$axios.get(url+'/dataset',{
          params:{
            'data':query
          }
        },{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res=>{
          if(res.data.error_code==0){
            let size=res.data.data.total_records;
            let records=res.data.data.records;
            for(let i=0;i<size;i++){
              let record={
                dataSetName:records[i].name,
                dataSetDes:records[i].description,
                dataSetId:records[i].id,
              };
              console.log(record);
              this.data.push(record)
            }
          }else{
            alert("查询失败")
          }
        });
      },
      //选择对应数据集
      chooseDataSet(index){
        this.value3=false;
        this.train.trainDataSet=this.data[index].dataSetName;
        this.dataSetId=this.data[index].dataSetId;
        console.log(this.dataSetId)
      },
      //查询模型
      searchModel(){

      },
      //选择对应模型
      chooseModel(index){
        this.value4=false;
        this.train.chooseModel=this.data3[index].modelName
      },
      //查询对应算法
      searchAlgorithm(){
      },
      //选择算法
      chooseAlgorithm(index){
        this.value5=false;
        this.train.algorithm=this.data4[index].algorithmName
      },
      //打开对话框，给后端发送信号，获取对选择数据集的全局分析结果
      openModal(){
        this.modal=true;
      },
      //关闭对话框
      closeModal(){
        this.train.trainSet=0;
        this.train.testSet=0;
        this.train.verifySet=0;
        this.train.randSeed='否';
        this.modal=false;
      },
      //保存数据并关闭对话框
      saveData(){
        this.uuid=this.UUID;
        this.modal=false;
      },
      //重置数据，将训练集、测试集、验证集的划分比例重置为零
      resetData(){
        this.train.trainSet=0;
        this.train.testSet=0;
        this.train.verifySet=0;
      },
      createUUID(){
        if(this.train.randSeed.localeCompare("是") == 0){
          this.UUID=this.guidGenerator();
        }
        else {
          alert("此状态下不能生成UUID")
        }
      },
      //查询用户ID
      remoteMethod (query) {
        if (query !== '') {
          this.loading1 = true;
          let fuzzyKey=JSON.stringify({
            'name':query,
            'username':query,
            'fuzzy_key': ['name', 'username'],
            'or_key':['name', 'username']
          });
          this.$axios.get(url+'/user',{
            params:{
              'data':fuzzyKey
            }
          },{
            headers:{
                'Content-Type':'application/json'
            }
          }).then(res=>{
            if(res.data.error_code==0){
              let num=res.data.data.total_records;
              this.loading1 = true;
              setTimeout(() => {
                this.loading1 = false;
                for(let i=0;i<num;i++){
                  let record=res.data.data.records[i];
                  let list={
                    value: record.id,
                    label: record.username
                  };
                  if(this.options.length==0){
                    this.options.push(list);
                  }
                  if(this.options.length>0){
                    let flag=0;
                    for(let j=0;j<this.options.length;j++){
                      if(list.value==this.options[j].value){
                        flag=1;
                      }
                    }
                    if(flag==0){
                      this.options.push(list)
                    }
                  }
                }
              }, 200);
            }
          })
        } else {
          this.options = [];
        }
      },
      //开始训练
      startTrain() {
        this.$router.push('/algorithm/trainManage');
      },
      //生成UUID随机码
      guidGenerator() {
        let S4 = function() {
          return ((1 + Math.random()) * 0X10000 | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
      },
    }
  }
</script>

<style scoped>

</style>
